<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文字</title>
    <style>
        /*
            在网页中，每个文字被显示时都会有一个文本框与之对应
                当我们设置元素的font-size时，实际上就是在设置文本框的大小
                在文本框存在一个位置叫做基线（baseline）

            文字的垂直对齐：
                默认每个文字和父元素在垂直方向都是沿着基线对齐的

            vertical-align
                - 设置元素垂直对齐的方式
                - 可选值：
                    baseline 默认值 子元素和父元素的基线对齐
                    top 子元素文本框的顶部和父元素文本框的顶部对齐
                    bottom 子元素文本框的底部和父元素文本框的底部对齐
                    middle 将元素的中线和父元素基线高度+x高度一半的位置对齐
                 - 开发中经常通过vertical-align来消除图片下边的空白

         */
        p{
            font-size: 40px;
            border: 1px orange solid;
        }

        span{
            font-size: 20px;
            border: 1px red solid;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    落霞与孤鹜齐飞，秋x<span>水</span>共长天一色
</p>
</body>
</html>